<template>
  <div class="register-container">
    <el-card class="register-card">
      <h2 class="register-title">注册</h2>
      <el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="80px">
        <el-form-item label="账号" prop="username">
          <el-input v-model="registerForm.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="registerForm.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="registerForm.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="registerForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            action="http://192.168.239.53:8082/api/upload"
            list-type="picture-card"
            v-model="fileList"
            :on-preview="handlePicturePreview"
            :on-remove="handlePictureRemove"
            :on-success="handlePictureSuccess"
            :on-error="handlePictureError"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleRegister">注册</el-button>
          <el-button @click="navigateToLogin">返回登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      registerForm: {
        username: '',
        password: '',
        nickname: '',
        email: '',
        gender: null,
        user_pic: '', // 上传头像的字段
      },
      fileList: [], // 初始化为空数组
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
        ],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
      },
    };
  },
  methods: {
    // 注册提交
    handleRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          const gender = this.registerForm.gender === '男' ? 0 : 1; // 将性别从字符串转换为整数

          const user = {
            username: this.registerForm.username,
            password: this.registerForm.password,
            nickname: this.registerForm.nickname,
            email: this.registerForm.email,
            gender: gender,
            userPic: this.registerForm.user_pic,
          };
          console.log('user', user);  // 打印提交的数据，检查 imagePath 是否正确
          axios
            .post('http://192.168.239.53:8082/register', user, {
              headers: { 'Content-Type': 'application/json' },
            })
            .then((response) => {
              if (response.data.code === 1) {
                this.$message.success('注册成功！');
                this.$router.push('/login');
              } else {
                this.$message.error(response.data.msg || '注册失败');
              }
            })
            .catch((error) => {
              console.error('注册请求失败:', error);
              this.$message.error('注册请求失败，请稍后再试');
            });
        } else {
          console.log('注册表单校验失败');
        }
      });
    },

    // 头像上传成功
    handlePictureSuccess(response) {
      if (response.data) {
        this.registerForm.user_pic = response.data; // 保存头像路径
        this.$message.success('头像上传成功');
      } else {
        this.$message.error('头像上传失败');
      }
    },

    handlePictureError() {
      this.$message.error('头像上传失败，请稍后重试');
    },

    navigateToLogin() {
      this.$router.push('/login');
    },
  },
};
</script>
